<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>插画</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'blue';
    </script>
</head>
<body>
    <h2>公共插画展示</h2>
    为统一公共插画使用,定义一些常用的图片样式,类名都以<code>.pic-</code>开头
    <style>
        h3{
            clear: both;
            margin-top: 20px;
        }
        td{
            text-align: center;
        }
        pd10 {
            padding: 10px;
        }
        .conter{
            width: 140px;
            height:140px;
            position: relative;
            margin: 5px;
            margin-bottom: 50px;
            float: left;
        }
        .clstext{
            word-break: break-all;text-align: center;
        }
    </style>
    <h3>一、患者头像类插画</h3>
    <div class="demo-exp-code entry-content">
        <div class="conter1"></div>
    </div>

    <h3>二、院方工作头像类插画</h3>
    <div class="demo-exp-code entry-content">
        <div class="conter2"></div>
    </div>
    <h3>三、就诊类型插画</h3>
    <div class="demo-exp-code entry-content">
        <div class="conter3"></div>
    </div>
    <h3>四、登录方式插画</h3>
    <div class="demo-exp-code entry-content">
        <div class="conter4"></div>
    </div>
    <h3>五、关于插画<a href="javascript:void(0);" id="langAboutBtn">切换语言</a></h3>
    <div class="demo-exp-code entry-content">
        <div class="conter5"></div>
    </div>
    <h3>六、系统状态插画<a href="javascript:void(0);" id="langBtn">切换语言</a></h3>
    <div class="demo-exp-code entry-content">
        <div class="conter6"></div>
    </div>
    <script type="text/javascript">
        function init(){
            // --患者--
            var patArr = ['man','woman','unknown-gender'];
            var pre = 'pic-pat-',html=[];
            for(var i=0;i<patArr.length;i++){
                html.push('<div class="conter"><div class="'+pre+patArr[i]+'"/><div class="clstext">'+pre+patArr[i]+'</div></div>');
            }
            $('.conter1').html(html.join(""));
            // --院方人员--
            var usrArr = ['doctor','nurse','surgeon','clothing-worker','medi-worker','dep-director','hosp-director','doctor-woman'];
            pre = 'pic-usr-',html=[];
            for(var i=0;i<usrArr.length;i++){
                html.push('<div class="conter"><div class="'+pre+usrArr[i]+'"/><div class="clstext">'+pre+usrArr[i]+'</div></div>');
            }
            $('.conter2').html(html.join(""));
            // --就诊方式--
            var admArr = ['out','em','in'];
            pre = 'pic-adm-',html=[];
            for(var i=0;i<admArr.length;i++){
                html.push('<div class="conter"><div class="'+pre+admArr[i]+'"/><div class="clstext">'+pre+admArr[i]+'</div></div>');
            }
            $('.conter3').html(html.join(""));
            // --登录方式-
            var logonArr = ['cert','default','face','phone','pin','sound','ukey'];
            pre = 'pic-logon-',html=[];
            for(var i=0;i<logonArr.length;i++){
                html.push('<div class="conter"><div class="'+pre+logonArr[i]+'"/><div class="clstext">'+pre+logonArr[i]+'</div></div>');
            }
            $('.conter4').html(html.join(""));
            // --关于方式-
            var aboutArr = ['dhcc-digitalmed','imedical-logo'];
            pre = 'pic-about-',html=[];
            for(var i=0;i<aboutArr.length;i++){
                html.push('<div class="conter"><div class="'+pre+aboutArr[i]+'"/><div class="clstext">'+pre+aboutArr[i]+'</div></div>');
            }
            $('.conter5').html(html.join(""));
            // -- 系统状态 --
            var arr = ['e403','e404','e500','nodata','nodata-msg','nodata-region','timeout-relogon','welcome'];
            pre = 'pic-sysst-',html=[];
            for(var i=0;i<arr.length;i++){
                html.push('<div class="conter"><div class="'+pre+arr[i]+'"/><div class="clstext">'+pre+arr[i]+'</div></div>');
            }
            $('.conter6').html(html.join(""));
            isChinese = true;
            var linkObj = null;
            $("#langBtn").click(function(){
                if (isChinese){
                    linkObj = $('<link>', {
                        rel: 'stylesheet',
                        type: 'text/css',
                        href: '../../dist/css/locale/hisui.en.css'
                    }).appendTo('head');
                }else{
                    linkObj.remove();
                }
                isChinese = !isChinese;
                $("#langBtn").text('切换成'+(isChinese?'英文':'中文'));
                $("#langBtn").text('切换成'+(isChinese?'英文':'中文'));
            });
            $("#langAboutBtn").click(function(){
                if (isChinese){
                    linkObj = $('<link>', {
                        rel: 'stylesheet',
                        type: 'text/css',
                        href: '../../dist/css/locale/hisui.en.css'
                    }).appendTo('head');
                }else{
                    linkObj.remove();
                }
                isChinese = !isChinese;
                $("#langBtn").text('切换成'+(isChinese?'英文':'中文'));
                $("#langAboutBtn").text('切换成'+(isChinese?'英文':'中文'));
            });
        }
        $(function(){
            init();
        });
    </script> 
</body>
</html>